<template>
  <div class="root-wrapper">
    <el-row style="border-bottom: solid 1px #b6b6b6;">
      <el-col :span="10">
        <div class="banner">

          <div class="logo"></div>
          <div>
            <div>草原红太阳</div>
            <div class="eng">Grace Sun over Grassland</div>
          </div>

        </div>
      </el-col>
      <el-col :offset="12" :span="2">
        <div class="user pv-10">

          <el-popconfirm
            title="你确定要登出吗？"
            @confirm="logout"
          >
            <el-avatar slot="reference" class="shadow-sm"
                       src="https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png"></el-avatar>
          </el-popconfirm>


          <div class="user-desc">{{ user ? user.nickname : "未登录" }}</div>
        </div>
      </el-col>
    </el-row>
    <el-row class="nav h-100">
      <el-col :span="3">
        <el-menu
          style="overflow: hidden"
          :router="true"
          default-active="materialInfo">

          <el-menu-item index="/material">
            <i class="el-icon-s-cooperation"></i>
            <span  slot="title">原料信息</span>
          </el-menu-item>
          <el-menu-item index="/excipients">
            <i class="el-icon-orange"></i>
            <span slot="title">辅料信息</span>
          </el-menu-item>
          <el-submenu index="doc">
            <template  slot="title">
              <i class="el-icon-s-management fs18"></i>
              <span >文档管理</span>
            </template>
            <el-menu-item-group>
              <!--              <template slot="title">分组一</template>-->
              <el-menu-item index="/doc/note"><i class="el-icon-notebook-1"></i>学习资料</el-menu-item>
              <el-menu-item index="/doc/report"><i class="el-icon-notebook-2"></i>科研报告</el-menu-item>
            </el-menu-item-group>
          </el-submenu>


          <el-menu-item  index="/userInfo">
            <i class="el-icon-user-solid"></i>
            <span slot="title">用户管理</span>
          </el-menu-item>
          <!--          <el-menu-item index="/approval">-->
          <!--            <i class="el-icon-s-check"></i>-->
          <!--            <span slot="title">我的审批</span>-->
          <!--          </el-menu-item>-->
          <el-menu-item  index="/snapshot">
            <i class="el-icon-camera-solid"></i>
            <span slot="title">快照管理</span>
          </el-menu-item>
          <el-menu-item  index="/about">
            <i class="el-icon-info"></i>
            <span slot="title">关于</span>
          </el-menu-item>

        </el-menu>
      </el-col>


      <el-col class="ph-30 bg-grey h-100" :span="21">
        <router-view></router-view>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import router from "../router";
import store from "/src/store/index";

export default {
  name: "Home",
  beforeCreate() {
    if (store.state.user === null) {
      router.push("/login");
    }
  },
  methods: {
    logout: function() {
      router.push("/login");
    }
  },
  computed: {
    sessionId() {
      return this.$store.state.sessionId;
    }
  },
  data() {
    return {
      user: this.$store.state.user,
      logoSrc: require("../../public/logo.jpg")
    };
  }
};
</script>

<style scoped>


.banner {
  display: flex;
  align-items: center;
  padding-left: 10px;
  font-weight: 500;
  font-size: 26px;
  color: #4b4b4b;
}

.root-wrapper {
  height: 100vh;
  display: flex;
  flex-direction: column;
}

.user {
  display: flex;
  align-items: center;
}

.nav {
  width: 100%;
}

.fs18 {
  font-size: 18px;
}

.logo {
  background: url("../../public/logo.jpg");
  background-size: cover;
  width: 70px;
  height: 70px;
}

.eng {
  font-family: Helvetica;
  font-size: 14px;
}


.user-desc {
  font-size: 13px;
  margin: 0 10px;
  color: #2a2a2a;
}
</style>